<template>
  <div class="content">
    <div class="tabs">
      <div :class="{ active: show == 1 }" @click="navClick(1)">考试分析</div>
      <div :class="{ active: show == 2 }" @click="navClick(2)">历史成绩</div>
    </div>
    <!-- 考试任务 -->
    <div class="task" v-show="show == 1 && examNews.score != null">
      <div class="task_top">
        <div class="item">
          <i class="iconfont icon-kaoshifenxi_biaoqian" />
          <span class="txt">考试分数最高</span>
          <span class="fenshu"
            >{{ examNews.score }}<span class="fenshu_txt"> 分</span></span
          >
          <span class="time">
            <i class="iconfont icon-kaoshishichang" />
            {{ examNews.scoreTime }}
          </span>
        </div>
        <div class="item">
          <i class="iconfont icon-kaoshifenxi_biaoqian" />
          <span class="txt">考试排名最高</span>
          <span class="ranking"
            >第 <span class="ranking_num">{{ examNews.rank }}</span> 名</span
          >
          <span class="time">
            <i class="iconfont icon-kaoshishichang" />
            {{ examNews.rankTime }}
          </span>
        </div>
        <div class="item">
          <i class="iconfont icon-kaoshifenxi_biaoqian" />
          <span class="txt">考试用时最短</span>
          <span class="exam_time"
            >{{ examNews.duration
            }}<span class="exam_time_txt"> 分钟</span></span
          >
          <span class="time">
            <i class="iconfont icon-kaoshishichang" />
            {{ examNews.durationTime }}
          </span>
        </div>
      </div>
      <!-- 图表 -->
      <div class="task_chart">
        <div id="chart" style="width: 1200px; height: 450px"></div>
        <div class="title">
          <i class="iconfont icon-kaoshifenxi_biaoqian" />
        </div>
      </div>
    </div>
    <!-- 历史成绩 -->
	<paperItem :list="historyGradeList" difTime="date" v-show="show ==2"></paperItem>
		<Empty v-if="show == 2 && historyGradeList.length == 0" text="暂无考试"></Empty>
		<Empty v-if="show == 1 && examNews.score == null" text="暂无考试"></Empty>
    <!-- 分页 -->
    <PgCom v-if=" total > pageSize &&  show == 2" :total="total" :pageNo="pageNo" :pageSize="pageSize" @pageNoChange="pageNoChange"></PgCom>
  </div>
</template>

<script>
export default {
  data() {
    return {
      examNews: {},
      show: 1, //展示
      pageNo: 1, //页码
      pageSize: 6,
      total: 0,
      paperPages: 0, //页数
      historyGradeList: [], //历史成绩
      month: [], //月份
      achievement: [], //平均分
    };
  },
  created() {
	// this.gradeAnalyse();
  },
  mounted() {
    this.myEcharts();
  },
  methods: {
    //echarts图表
    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("chart"));

      // 指定图表的配置项和数据
      var option = {
        title: [
          {
            text: "近一年成绩对比",
            left: "88px",
            top: "34px",
            subtext: "平均分",
            subtextStyle: {
              lineHeight: "50",
              fontSize: 16,
            },
            textStyle: {
              fontSize: 20,
            },
          },
          {
            text: "上月相较前一月稳步提升，本月不要骄傲呀！",
            left: "240px",
            top: "34px",
            textStyle: {
              fontSize: 16,
              lineHeight: "20",
              color: "#FFA800",
            },
          },
        ],
			//x轴配置
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
          axisLine: {
            show: false,
            type: "solid",
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            color: "#a6a6a6",
            fontSize: 16,
          },
		},
		//y轴配置
        yAxis: {
          type: "value",
          show: false,
		},
		//数据及数据显示样式配置
        series: [
          {
            data: [],
            type: "line",
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#557EE5", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#557EE500", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            lineStyle: {
              color: "#557EE5",
              fontSize: 16,
            },
            label: {
              normal: {
                show: true,
                position: "top",
                color: "#a6a6a6",
              },
            },
          },
        ],
      };
		
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      this.axios
        .get("/web/student/student/mine/gradeAnalyse", {})
        .then((res) => {
          this.examNews = res;
          this.month = this.examNews.gradeCurve.map((item) => item.name);
          this.achievement = this.examNews.gradeCurve.map((item) => item.value);
          myChart.setOption({
            xAxis: {
              data: this.month,
            },
            series: [
              {
                data: this.achievement,
              },
            ],
          });
		});
    },
    navClick(type) {
      // 切换
      this.show = type;
      this.pageNo = 1;
      if (type == 2) {
		this.historyGrade();
      } 
      // else {
		// this.$nextTick().then(() => {
		// 	this.myEcharts()
		// }) 
      // }
    },
    selectTm(val) {
      // 历史选择
      this.selectVal = val;
      this.pageNo = 1;
      this.historyGrade();
    },
    pageNoChange(val) {
      //页数选择
      this.pageNo = val;
      if (this.show == 2) {
        this.historyGrade();
      } 
    },
    //获取成绩分析数据
    gradeAnalyse() {
      this.axios
        .get("/web/student/student/mine/gradeAnalyse", {})
        .then((res) => {
          this.examNews = res;
          this.month = this.examNews.gradeCurve.map((item) => item.name);
        });
    },
    historyGrade() {
      //历史成绩
      this.axios
        .post("/web/student/student/mine/historyGrade", {
          pageNo: this.pageNo,
          pageSize: this.pageSize
        })
        .then((res) => {
          this.historyGradeList = res.list;
          this.total = res.total
          this.paperPages = res.pages;
        });
    },
    skipResult() {
    },
  },
};
</script>

<style scoped src="../../style/statistics/scoreAnalysis.css">
.tabs {
  position: relative;
}
.el-select {
  position: absolute;
  right: 0;
}
/deep/.el-input__inner {
  border-radius: 50px;
  width: 106px;
  height: 34px;
  font-size: 14px !important;
  color: #a8aaad;
}
</style>